<template>
	<view>
		<view v-if="need_login_show">
			<m-login></m-login>
		</view>
	<view v-else class="shopCar">
		<view v-if="shopList.length===0">
			<mNodata></mNodata>
		</view>
		<view v-else>
			<view class="s-header">
				<view class="h-operation" @tap="handleChangeOperation()" v-if="operationStatus===1">编辑</view>
				<view class="h-operation" @tap="handleChangeOperation()" v-if="operationStatus===2">完成</view>
			</view>
			<view class="s-shoplist">
				<van-checkbox-group :value="result" @change="handOnChange">
					<view class="s-box" v-for="(item,index) in shopList" :key="index">
						<van-checkbox class="s-select" checked-color="#1989fa" :name="item.id" :data-id="item.id"
							:data-integral_num="item.integral_num" :data-num="item.number"   @change="childHandOnChange($event,index)">
						</van-checkbox>
						<image :src="item.image"></image>
						<view class="s-detail">
							<view class="d-name">{{item.product_name}}</view>
							<view class="d-two">
								<view class="t-jifen">{{item.integral_num}}积分</view>
								<van-stepper :value="item.number" min="1"  :data-goods_id="item.id" @change="onChange($event,index)" />
							</view>
						</view>
					</view>
				</van-checkbox-group>
			</view>
			<view class="s-submit">
				<van-checkbox class="s-all" :disabled="shopList.length===0" :value="checked" @change="handleSelectAll">全选</van-checkbox>
				<view class="r-box">
					<view class="all-money">合计:{{alljifen}}积分</view>
					<button class="sure" v-if="operationStatus===1" @tap="handleSubmit()">确认兑换</button>
					<button class="sure" v-if="operationStatus===2" @tap="handleSubmit()">删除</button>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import MLogin from '@/components/m-login.vue'
	export default{
		name:'shopCar',
		data(){
			return{
				need_login_show:true,
				operationStatus:1,
				checked:false,
				shopList:[],
				alljifen:0,
				result: [],
				selectShopList:[],
				page:1,
				is_load:0,
				need_refresh:false
			}
		},
		onShow: function() {
			if(this.$store.state.token!==''){
				this.need_login_show=false
			}else{
				this.need_login_show=true
				return
			}
			if(this.need_refresh){  // 用于处理页面缓存时，每进入购物车页面就刷新请求
				this.page=1
				this.is_load=0
				this.shopList=[]
				this.getCartList()
			}else{
				this.getCartList()
			}
		},
		onReachBottom() {
			if(this.is_load>0){
				this.page++
				setTimeout(()=>{
					this.getCartList()
				},1000)
			}else{
				uni.showToast({
					title:"没有更多数据啦",
					icon:"none",
				})
			}
		},
		mounted(){

		},
		methods:{
			//修改操作状态
			handleChangeOperation(){
				if(this.operationStatus===1){
					this.operationStatus=2
				}else{
					this.operationStatus=1
				}
			},
			//当每次改变选项的时候触发
			handOnChange(e){
				this.result=e.detail
				let result=this.result.join(",")
				// this.selectShopList=[]
				this.alljifen=0
				this.shopList.forEach((item)=>{
					if(result.indexOf(item.id)!==-1){
						this.alljifen+=parseInt(item.integral_num * item.number)
					}
				})
				if(this.result.length===this.shopList.length){
					this.checked=true
				}else{
					this.checked=false
				}
			},
			childHandOnChange(event,index){ // 单选按钮的事件
				if(this.result.indexOf(String(event.currentTarget.dataset.id))===-1){  //已选择的数组中不存在，说明是取消操作
					this.alljifen-=parseInt(event.currentTarget.dataset.integral_num * this.shopList[index].number)
				}else{
					this.alljifen+=parseInt(event.currentTarget.dataset.integral_num * this.shopList[index].number)
				}
			},
			//全选
			handleSelectAll(e){
				this.result=[]
				// this.selectShopList=[]
				this.checked=e.detail
				let current_jifen=0
				if(this.checked){
					this.shopList.forEach((item)=>{
					   this.result.push(String(item.id))
						current_jifen+=parseInt(item.integral_num * item.number)
					   // this.selectShopList.push(item)
					})
					this.alljifen=current_jifen
				}else{
					this.result=[]
					this.alljifen=current_jifen
					// this.selectShopList=[]
				}
				// this.$store.commit("CHANGESHOPCARLIST",this.selectShopList)
			},
			async handleSubmit(){  // 确认兑换与删除
				//如果状态为1，就执行提交订单操作否则就执行删除操作
				if(this.result.length===0){
					uni.showToast({
						title:"请选择商品",
						icon:"none"
					})
					return
				}
				if(this.operationStatus===1){
					let ids=''
					this.result.forEach((item)=>{
						if(ids===''){
							ids=item
						}else{
							ids=ids+','+item
						}
					})
					this.$store.commit('CHANGESHOPCARLIST',ids)
					this.$router.push({
						route:this.$routesConfig.carSureChange,
					})
				}else{ // 删除操作
					uni.showLoading({})
					if(this.result.length===0){ //未选中
						return
					}else{
						let ids=''
						let new_shop_list=this.shopList
						this.result.forEach((item)=>{
							new_shop_list=new_shop_list.filter(t => t.id != item)
							if(ids===''){
								ids=item
							}else{
								ids=ids+','+item
							}
						})
						await this.$apis.delCartGoods({access_token:'',ids:ids})
						this.result=[]
						this.shopList =new_shop_list
						this.alljifen=0
						uni.hideLoading()
					}
				}
			},
			async getCartList(){ // 获取购物车列表
				uni.showLoading({})
				let resData= await  this.$apis.getCartList({access_token:'',page:this.page})
				this.shopList.push(...resData.data.lists)
				this.is_load=resData.data.is_load
				this.need_refresh=true
				uni.hideLoading()
			},

			async onChange(event,index){   //购物车数量改变
				uni.showLoading({})
				let select_num=event.detail
				await this.$apis.editCartGoods({id:event.currentTarget.dataset.goods_id,number:select_num,access_token: ''})
				this.shopList[index].number=parseInt(event.detail)
				//更新积分
				let current_jifen=0
				if(this.result.length>0){
					this.result.forEach((item)=>{
						let shop_list=this.shopList.filter(t => t.id==item)
						if(shop_list.length>0){
							current_jifen+=parseInt(shop_list[0].integral_num * shop_list[0].number)
						}
					})
					if(current_jifen>0){
						this.alljifen=current_jifen
					}

				}
				uni.hideLoading()
			},
		},
		components:{
			MLogin
		}
	}
</script>

<style lang="less" scoped>
	.shopCar{
		width: 100%;
		position: relative;
		.s-header{
			width: 100%;
			height: 100rpx;
			position: fixed;
			border-bottom: solid 1px #EDEDED;
			z-index: 99;
			background-color: #ffffff;
			.h-operation{
			   position: absolute;
			   top: 50%;
			   right: 30rpx;
			   transform: translate(0,-50%);
			   width: 100rpx;
			   height: 50rpx;
			   background-color: #FF9502;
			   border-radius: 25rpx;
			   color: #ffffff;
			   font-size: 26rpx;
			   line-height: 50rpx;
			   text-align: center;
			}
		}
		.s-shoplist{
			position: absolute;
			top: 100rpx;
			left: 0;
			right: 0;
			box-sizing: border-box;
			padding-bottom: 100rpx;
			// bottom: 100rpx;
			.s-box{
				box-sizing: border-box;
				display: flex;
				padding: 20rpx;
				border-bottom: solid 1px #EDEDED;
				.s-select{
					align-self: center;
					width: 80rpx;
					flex-shrink: 0;
				}
				image{
					display: block;
					align-self: center;
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
					flex-shrink: 0;
				}
				.s-detail{
					padding-left: 20rpx;
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.d-name{
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
                        font-size: 28rpx;
						color:#333333;
					}
					.d-two{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.t-jifen{
							color: #FF9502;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	    .s-submit{
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			z-index: 99;
			.s-all{
				flex-shrink: 0;
			}
			.r-box{
				flex-grow: 1;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				justify-content: flex-end;
				.all-money{
					font-size: 26rpx;
					color: #FF9502;
					padding-right: 20rpx;
				}
				.sure{
					background: #FF9502;
					box-sizing: border-box;
					height: 70rpx;
					font-size: 26rpx;
					color: #ffffff;
					line-height: 70rpx;
					padding: 0 40rpx;
					margin: 0;
				}
			}

		}
	}
	.shopCar /deep/ .van-checkbox__icon-wrap{
		padding-left: 20rpx;
	}
	.shopCar /deep/ .van-checkbox__icon{
		font-size: 40rpx !important;
	}
</style>
